import 'dart:math';

import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';

class Book3DWidget extends StatefulWidget {
  final String? text;

  Book3DWidget({this.text}) : super();

  @override
  State<StatefulWidget> createState() {
    return _3dBookState();
  }
}

// ignore: camel_case_types
class _3dBookState extends State<Book3DWidget>
    with SingleTickerProviderStateMixin {
  AnimationController? _controller;
  Animation? _animation;
  Animation? _animation1;
  ClipRect? _child1;
  ClipRect? _child2;
  ClipRect? _child3;
  ClipRect? _child4;

  @override
  void initState() {
    init();
    _controller =
        AnimationController(vsync: this, duration: Duration(seconds: 1))
          ..addListener(() {
            setState(() {});
          });
    //动画翻书
    _animation = Tween(begin: .0, end: pi / 2)
        .animate(CurvedAnimation(parent: _controller!, curve: Interval(.0, .5)));
    //Flutter中组合动画使用Interval，Interval继承自Curve【Interval中begin 和end参数值的范围是0.0到1.0】
    _animation1 = Tween(begin: -pi / 2, end: 0.0).animate(
        CurvedAnimation(parent: _controller!, curve: Interval(.5, 1.0)));
    _controller?.forward();
    _controller?.addStatusListener((status) {
      if (status == AnimationStatus.completed) {
        _controller?.reverse();
      } else if (status == AnimationStatus.dismissed) {
        _controller?.forward();
      }
    });
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(
          title: Text(widget.text ?? ""),
        ),
        body: Row(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            //类似framlayout
            Stack(
              children: [
                _child1 ?? ClipRect(),
                Transform(
                  alignment: Alignment.centerRight,
                  transform: Matrix4.identity()
                    ..setEntry(3, 2, 0.001)
                    ..rotateY(_animation1?.value),
                  child: _child3,
                ),
              ],
            ),
            Container(
              width: 1,
              color: Colors.white,
            ),
            Stack(
              children: [
                _child4 ?? ClipRect(),
                Transform(
                  alignment: Alignment.centerLeft,
                  transform: Matrix4.identity()
                    ..setEntry(3, 2, 0.001)
                    ..rotateY(_animation?.value),
                  child: _child2,
                )
              ],
            )
          ],
        ));
  }

  void init() {
    _child1 = ClipRect(
      child: Align(
        alignment: Alignment.centerLeft,
        widthFactor: 0.5,
        child: Container(
          width: 300,
          height: 400,
          child: Image.asset(
            'assets/images/women_one.jpg',
            fit: BoxFit.cover,
          ),
        ),
      ),
    );
    _child2 = ClipRect(
      child: Align(
        alignment: Alignment.centerRight,
        widthFactor: 0.5,
        child: Container(
          width: 300,
          height: 400,
          child: Image.asset(
            'assets/images/women_one.jpg',
            fit: BoxFit.cover,
          ),
        ),
      ),
    );

    _child3 = ClipRect(
      child: Align(
        alignment: Alignment.centerLeft,
        widthFactor: 0.5,
        child: Container(
          width: 300,
          height: 400,
          child: Image.asset(
            'assets/images/women_two.jpg',
            fit: BoxFit.cover,
          ),
        ),
      ),
    );

    _child4 = ClipRect(
      child: Align(
        alignment: Alignment.centerRight,
        widthFactor: 0.5,
        child: Container(
          width: 300,
          height: 400,
          child: Image.asset(
            'assets/images/women_two.jpg',
            fit: BoxFit.cover,
          ),
        ),
      ),
    );
  }

  @override
  void dispose() {
    _controller?.dispose();
    super.dispose();
  }
}
